<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="form" size="small" label-width="76px">
        <el-form-item label="报修人">
          <el-input v-model="form.repairUserName" clearable placeholder="请输入报修人"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="form.repairUserDeptName" clearable placeholder="请输入部门"></el-input>
        </el-form-item>
        <el-form-item label="报修类型">
          <el-select v-model="form.repairType" clearable placeholder="请选择">
            <el-option v-for="item in repairTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="form.startTime"
            type="date"
            placeholder="开始日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptionsStart"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptionsEnd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left: 10px;">查 询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="rwoNumber" label="工单编号" width="110"></el-table-column>
        <el-table-column prop="createName" label="报修人" width="80"></el-table-column>
        <el-table-column prop="createDept" label="部门" width="80"></el-table-column>
        <el-table-column prop="createTel" label="报修人手机号" width="120"></el-table-column>
        <!-- <el-table-column prop="repairUserEmail" label="邮箱"></el-table-column> -->
        <!-- <el-table-column prop="repairType" label="报修类型" :formatter="formatter" width="80"></el-table-column> -->
        <el-table-column prop="repairTypeName" label="报修类型" width="80"></el-table-column>
        <el-table-column prop="repairContent" label="报修内容"></el-table-column>
        <el-table-column prop="urgency" label="紧急程度" width="130px">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.urgency" :disabled="disabled"> </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上报时间" width="100"></el-table-column>
        <el-table-column prop="repairPicUrl" label="报修照片" width="220">
          <!--插入图片链接的代码-->
          <template slot-scope="scope">
            <viewer :images="scope.row.repairPicUrl">
              <img v-for="src in scope.row.repairPicUrl" :key="src" :src="src" class="img-over" />
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80" :formatter="formatStatus"></el-table-column>
        <!-- <el-table-column prop="satisfaction" label="满意度" width="80"></el-table-column> -->
        <!-- <el-table-column prop="appraise" label="评价"></el-table-column> -->
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row)" type="text" size="small">查看详情</el-button>
            <!-- <el-button v-if="scope.row.tempStatus == 0" @click="handleEVent(scope.row)" type="text" size="small"
              >派单</el-button
            >
            <el-button
              v-else-if="scope.row.tempStatus == 3 || scope.row.tempStatus == 4"
              @click.native.prevent="examRow(scope.row, tableData)"
              type="text"
              size="small"
              >审核</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        layout="total,prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="currentPage"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>
    <work-processing-modal ref="WorkProcessingModal" @ok="processingModalFormOk"></work-processing-modal>
    <work-order-modal ref="WorkOrderModal"></work-order-modal>
  </section>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { queryPageInfo, ackWorkOrder, getTypeList } from './js/repair'
import { WorkOrderStatusData } from './js/constants'
import WorkProcessingModal from './modules/WorkProcessingModal'
import WorkOrderModal from './modules/WorkOrderModal'
export default {
  name: 'OrderList',
  data () {
    return {
      tenantNo: Vue.ls.get(USER_INFO).tenantNo,
      disabled: true,
      repairUser: '',
      email: '',
      radio1: '',
      eventControl: '',
      dialogHandleVisible: false,
      currentPage: 1,
      totalPageNum: 0,
      pageSize: 10,
      repairTypeList: [],
      form: {
        repairUserName: '',
        repairUserDeptName: '',
        repairType: '',
        startTime: '',
        endTime: ''
      },
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return time.getTime() > new Date(this.form.endTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime() - 86400000
          }
        }
      },
      tableData: []
    }
  },
  components: { WorkProcessingModal, WorkOrderModal },
  mounted () {
    let data = {
      tenantNo: this.tenantNo
    }
    this.getOrderList(data)
    this.getTypeList()
  },
  methods: {
    formatStatus (row, column, cellValue) {
      return this.$base.constFormatter(WorkOrderStatusData, cellValue)
    },
    onSubmit () {
      this.getOrderList()
    },
    async getTypeList () {
      let res = await getTypeList({
        pageNum: 1,
        pageSize: 10000
      })
      if (res.code === 0) {
        this.repairTypeList = res.data.list
      }
    },
    async getOrderList () {
      let data = {
        tenantNo: this.tenantNo,
        repairUserName: this.form.repairUserName,
        departmentName: this.form.repairUserDeptName,
        repairType: this.form.repairType,
        beginTime: this.form.startTime,
        endTime: this.form.endTime
      }
      let params = { ...data, pageNum: this.currentPage, pageSize: 10 }
      let res = await queryPageInfo(params)
      this.totalPageNum = res.data.total
      res = res.data.list
      res.forEach(item => {
        item.repairPicUrl = item.repairPicUrl.split(';')
        for (let i = 0; i < item.repairPicUrl.length; i++) {
          if (item.repairPicUrl[i] === '') {
            item.repairPicUrl.splice(i, 1)
          }
        }
      })
      this.tableData = res
    },
    handleView (row) {
      this.$refs.WorkOrderModal.isDetail = true
      this.$refs.WorkOrderModal.title = '工单详情'
      this.$refs.WorkOrderModal.edit(row)
    },
    handleEVent (row) {
      this.$refs.WorkProcessingModal.isAdd = true
      this.$refs.WorkProcessingModal.isDetail = false
      this.$refs.WorkProcessingModal.title = '工单处理'
      this.$refs.WorkProcessingModal.edit(row)
    },
    examRow (row) {
      this.$confirm('是否确认完成此维修工单?', '审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        row.status = '已完成'
        let res = await ackWorkOrder({ rowNumber: row.rwoNumber })
        if (res.code === 0) {
          this.$message.success('审核成功！')
          this.getOrderList()
        }
      })
    },
    pageHandleChange (page) {
      this.currentPage = page
      this.getOrderList()
    },
    processingModalFormOk () {
      this.getOrderList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  .header-card {
    margin-bottom: 10px;
    .el-form {
      .el-form-item {
        .el-input {
          width: 160px;
        }
        .el-select {
          width: 160px;
        }
      }
    }
  }
  .el-pagination {
    text-align: center;
    display: block;
    margin: 10px auto;
  }
  .img-over {
    margin-right: 5px;
    width: 60px;
    height: 45px;
    cursor: pointer;
  }
}
/deep/ .el-rate__icon {
  margin-right: 2px;
}
</style>
